<template>
  <div>
    <div style="margin-bottom: 30px;">
      <el-button type="primary" @click="add">新增</el-button>
<!--      <el-button>修改</el-button>-->
    </div>
    <div class="checkbox-container">
      <el-checkbox-group v-model="selec">
        <div class="checkbox-row" v-for="(items, index) in chunkedSensitive" :key="index">
          <el-checkbox
            v-for="(item, subIndex) in items"
            :key="subIndex"
            :label="item"
          />
        </div>
      </el-checkbox-group>
    </div>
</div>
</template>
<script>
export default {
    data() {
    return {
      Sensitive:[
        "服不服", "你服不服", "弄死你", "弄死他们", "弄死他", "弄死你们", "往死里打",
        "自己打", "自己抽", "别告老师",
        "别给老师说", "告老师", "让你乱说", "咱俩单挑", "我们单挑", "去死吧", "你去死吧",
        "你去死", "救命", "救命啊", "救命救命", "救救我", "快救救我", "别打了",
        "别打我呀", "别打我了", "别打我", "别打啦", "来人啊", "来人呀", "杀人了",
        "杀人啦", "杀人呀", "抢劫啦", "抢劫啊", "抢劫了", "抢钱啦", "抢钱啊",
        "抢钱了", "求求你", "求你了", "好疼啊", "放开我", "放过我吧", "放手",
        "我错了", "对不起", "不敢了", "老师快来", "叫老师", "老师来啦", "老师来了",
        "地震了", "地震啦", "着火了", "着火啦", "快住手", "救火啊", "快救火呀",
        "救火啦", "快救火啊", "有人打架", "叫保安", "保安快来", "快叫保安", "叫警察",
        "警察来了", "我要报警", "打电话报警", "报警呀", "幺幺零", "打幺幺零", "打幺幺零呀",
        "打幺幺零啊", "请帮打幺幺零"
      ],
      selec:[]
    };
  },
  computed: {
    // 将Sensitive数组分割成每行8个元素的子数组
    chunkedSensitive() {
      const chunkSize = 8;
      const result = [];
      for (let i = 0; i < this.Sensitive.length; i += chunkSize) {
        const chunk = this.Sensitive.slice(i, i + chunkSize);
        result.push(chunk);
      }
      return result;
    },
  },
  methods:{
    add(){
      this.$prompt('请输入需要添加的敏感词', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.Sensitive.push(value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });

    },
  }
}
</script>
<style scoped lang="scss">
.number{
  font-size: 18px;
}
.item-title{
  font-weight: bold;
  font-size: 17px;
  margin-top: 10px;
  width: 72px;
  text-align: right;
}
.checkbox-container {
  display: flex;
  flex-direction: column; /* 垂直布局 */
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  margin-bottom: 10px; /* 可选：每行之间的间距 */
}

.checkbox-row .el-checkbox {
  width: calc(100% / 8 - 10px); /* 每行8个，减去一些间距 */
  margin-right: 10px; /* 可选：子元素之间的间距 */
}

/* 可选：移除最后一行最后一个元素的右边距 */
.checkbox-row:last-child .el-checkbox:last-child {
  margin-right: 0;
}

/* 可选：调整复选框的样式以适应宽度 */
.el-checkbox .el-checkbox__inner {
  width: 100%;
  box-sizing: border-box;
}
</style>
